<html>

<head>
    <title>多个文件上传表单</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<style>
    form{
        margin: 20px;
        padding: 10px;
    }

    #picInput>input{
        display: block;
        margin: 10px;
    }
    .hide{
        display: none;
    }

</style>
<form action="pic.php" method="post" enctype="multipart/form-data">
<!-- <div class="uploadPop"> -->
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
    <div id="picInput" class="popRihtimg">
        上传图片：<input type="file" name='myfile[]' class="file0" multiple="multiple">
        <img src="" class="img hide" width="100px" height="100px">
    </div>
    <input id="addBtn" type="button" onclick="addPic1()" value="继续添加图片"><br/><br/>
    <button class="sure">完了</button>
<!-- </div> -->
</form>

<script>

    // 上传图片
    $(".popRihtimg").delegate(".file0","change",function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) 
        {
            $(this).next(".img").attr("src", objUrl);
            $(this).next(".img").removeClass("hide");
        }
    }) ;


    //建立一個可存取到該file的url
    function getObjectURL(file) 
    {
        var url = null ;
        if (window.createObjectURL!=undefined) 
        { // basic
            url = window.createObjectURL(file) ;
        }
        else if (window.URL!=undefined) 
        {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } 
        else if (window.webkitURL!=undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        console.log(url);
        return url ;
    }

    function clearInputFile(f){
        // console.log(f.value);
        if(f.value){
            try{
                f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
                // console.log(f.value);
            }catch(err){
                console.log(err);
            }
            if(f.value){ //for IE5 ~ IE10
                var form = document.createElement('form'), ref = f.nextSibling;
                form.appendChild(f);
                form.reset();
                ref.parentNode.insertBefore(f,ref);
            }
        }
    }

    function addPic1(){
        var addBtn =  $('#addBtn');
        var input = '<input type="file" name="myfile[]" class="file0" multiple="multiple">';
        var img ='<img src="" class="img hide" width="100px" height="100px">';
        var picInut = $('#picInput');
        picInut.append(input);
        picInut.append(img);
        if($(".file0").length == 9){
            addBtn.attr("disabled","disabled");
        }
    }
</script>
</body>
</html>